<template>
  <ElCard header="政治生态风险级别地图" shadow="never">
    <div class="container_box">
      <div class="left_box">
        <LPage :areaData="areaData" />
      </div>
      <div class="map_box">
        <!-- 城市地图 -->
        <CMap
          v-if="showCMap"
          :allAreaData="allAreaData"
          @CMapChartClick="CMapChartClick"
          @setMapUnitId="setMapUnitId"
        />
        <!-- 县区地图 -->
        <CountyMap
          v-if="!showCMap"
          :allAreaData="allAreaData"
          @CMapBackClick="CMapBackClick"
          :mapJson="mapData"
        />
      </div>
      <div class="right_box" v-if="showCountTable">
        <RPage :unitData="unitData" />
      </div>
    </div>
  </ElCard>
</template>

<script setup lang="ts">
import { getUnitMap } from '@/api/home/home'
import { ref, inject, watch, Ref } from 'vue'
import RPage from './RPage.vue'
import LPage from './LPage.vue'
import CMap from './CMap.vue'
import CountyMap from './CountyMap.vue'
import sanmingJson from '@/assets/json/sanming.json'
import nanpingJson from '@/assets/json/nanping.json'
import ningdeJson from '@/assets/json/ningde.json'
import fuzhouJson from '@/assets/json/fuzhou.json'
import putianJson from '@/assets/json/putian.json'
import quanzhouJson from '@/assets/json/quanzhou.json'
import xiamenJson from '@/assets/json/xiamen.json'
import zhangzhouJson from '@/assets/json/zhangzhou.json'
import longyanJson from '@/assets/json/longyan.json'

const showCMap = ref(true)
const params = ref<any>({})
const areaData = ref([])
const unitData = ref([])
const mapData = ref()
const allAreaData = ref()
const showCountTable = ref(true)

// method
const CMapChartClick = (data: any) => {
  showCMap.value = data?.showCMap || false
  mapData.value = data.newMapData
}

const CMapBackClick = (data: any) => {
  showCMap.value = data?.showCMap || true
  // console.log(showCMap.value, 'boolean')

  emits('backMapData')
  updateChart()
}

const setMapUnitId = (id: number) => {
  emits('setUnitId', id)
  // showCMap.value = false
}

const year = inject('year') as Ref<any>
const unitId = inject('unitId') as Ref<any>
const parentOrgUnitId = inject('parentOrgUnitId') as Ref<any>

const updateChart = () => {
  getUnitMap(params.value).then((res) => {
    areaData.value = res.data.area
    unitData.value = res.data.unit
    allAreaData.value = res.data
  })
}

watch(
  () => year,
  () => {
    params.value.year = year.value
  },
  {
    deep: true,
    immediate: true
  }
)

watch(
  () => unitId,
  () => {
    console.log(unitId.value, parentOrgUnitId.value, ' unitId.value.center')
    // const dataArr = [
    //   10350301, 10350401, 10350801, 10350101, 10350201, 10350601, 10350901,
    //   10350501, 10350701, 10350001
    // ]
    // if (!dataArr.includes(Number(unitId.value))) {
    //   console.log('进来了')

    //   params.value.unitId = unitId.value
    //   return true
    // }
    // 判断显示地图：最笨的方法
    let newMapJson = {}
    let showCMaps = undefined
    if (
      Number(unitId.value) === 10350001 &&
      Number(parentOrgUnitId.value) === 10350301
    ) {
      showCMaps = true
      showCountTable.value = true
    } else if (
      Number(unitId.value) === 10350301 ||
      Number(parentOrgUnitId.value) === 10350301
    ) {
      newMapJson = putianJson
      showCMaps = false
      showCountTable.value = false
    } else if (
      Number(unitId.value) === 10350401 ||
      Number(parentOrgUnitId.value) === 10350401
    ) {
      newMapJson = sanmingJson
      showCMaps = false
      showCountTable.value = false
    } else if (
      Number(unitId.value) === 10350801 ||
      Number(parentOrgUnitId.value) === 10350801
    ) {
      newMapJson = longyanJson
      showCMaps = false
      showCountTable.value = false
    } else if (
      Number(unitId.value) === 10350101 ||
      Number(parentOrgUnitId.value) === 10350101
    ) {
      newMapJson = fuzhouJson
      showCMaps = false
      showCountTable.value = false
    } else if (
      Number(unitId.value) === 10350201 ||
      Number(parentOrgUnitId.value) === 10350201
    ) {
      newMapJson = xiamenJson
      showCMaps = false
      showCountTable.value = false
    } else if (
      Number(unitId.value) === 10350601 ||
      Number(parentOrgUnitId.value) === 10350601
    ) {
      newMapJson = zhangzhouJson
      showCMaps = false
      showCountTable.value = false
    } else if (
      Number(unitId.value) === 10350901 ||
      Number(parentOrgUnitId.value) === 10350901
    ) {
      newMapJson = ningdeJson
      showCMaps = false
      showCountTable.value = false
    } else if (
      Number(unitId.value) === 10350501 ||
      Number(parentOrgUnitId.value) === 10350501
    ) {
      newMapJson = quanzhouJson
      showCMaps = false
      showCountTable.value = false
    } else if (
      Number(unitId.value) === 10350701 ||
      Number(parentOrgUnitId.value) === 10350701
    ) {
      newMapJson = nanpingJson
      showCMaps = false
      showCountTable.value = false
    } else if (
      Number(unitId.value) === 10350001 ||
      Number(parentOrgUnitId.value) === 10350001
    ) {
      showCMaps = true
      showCountTable.value = true
    } else {
      showCMaps = false
      showCountTable.value = false
    }

    const data = {
      showCMap: showCMaps,
      newMapData: newMapJson
    }
    CMapChartClick(data)
    params.value.unitId = unitId.value
  },
  {
    deep: true,
    immediate: true
  }
)

watch(
  () => params,
  () => {
    updateChart()
  },
  {
    deep: true
  }
)

const emits = defineEmits({
  backMapData: () => true,
  setUnitId: (data) => !!data
})

defineOptions({
  name: 'Center'
})
</script>

<style scoped lang="scss">
.container_box {
  width: 100%;
  display: flex;
  align-items: flex-start;
  .left_box {
    width: 30%;
  }
  .map_box {
    width: 40%;
    margin-left: 10px;
    margin-right: 10px;
  }
  .right_box {
    width: 30%;
  }
}
</style>
